import React from 'react';
import cn from 'classnames';
import { Divider } from 'antd';
import { history } from 'umi'
import styles from './index.less';

const TodoSort = ({ active, unFinishCount = 0, finishCount = 0 }) => {
    const handleClick = todoSort => {
        if (todoSort === 'unprocessed') {
            history.push('/personal/todo');
        } else {
            history.push('/personal/todo/processed');
        }
    };

    return (
        <div className={styles.todoSortWrapper}>
            <div
                className={cn(styles.todoSortUnprocessed, `${active === 'unprocessed' ? styles.todoSortActive : ''}`)}
                onClick={() => handleClick('unprocessed')}
            >
                <span className={styles.title}>待处理</span>
                <span className={styles.text}>{unFinishCount}</span>
            </div>
            <Divider type="vertical" className={styles.divider} />
            <div
                className={cn(styles.todoSortProcessed, `${active === 'processed' ? styles.todoSortActive : ''}`)}
                onClick={() => handleClick('processed')}
            >
                <span className={styles.title}>已处理</span>
                <span className={styles.text}>{finishCount}</span>
            </div>
        </div>
    );
};

export default TodoSort;
